<template>
    <div class="section-padding">
        <div class="container">
            <div class="product-info row">
                <div class="col-lg-12 col-md-12 col-xs-12">
                    <div class="details-box">
                        <div class="ads-details-info">
                            <h2>{{soft.name}}</h2>
                            <p class="mb-2">
                               {{soft.descs}}
                            </p>
                            <div class="details-meta">
                                <span><a href="#"><i class="lni-alarm-clock"></i> {{ soft.createTime}}</a></span>
                                <span v-show="soft.isHot"><a href="#"><i class="lni-emoji-smile"></i> {{soft.isHot?'推荐':''}}</a></span>
                                <span><a href="#"><i class="lni-eye"></i> 299 View</a></span>
                            </div>
                            <h4 class="title-small mb-3">Specification:</h4>
                            <ul class="list-specification">
                                <li>
                                    <i class="lni-package"></i> {{soft.isCrack?'破解':''}}
                                </li>
                                <li>
                                    <i class="lni-shortcode"></i> {{ soft.isPay?'免费':soft.newPrice }}
                                </li>
                                <li>
                                    <i class="lni-text-align-right"></i> {{ soft.system }}
                                </li>
                                <li>
                                    <i class="lni-layers"></i> {{ soft.type == 1?'游戏':'软件'}}
                                </li>
                            </ul>
                        </div>
                        <div class="description">
                            <p>
                                <v-md-editor v-model="soft.info" :mode="`preview`"></v-md-editor>
                            </p>
                        </div>
                        <!-- <ul class="advertisement mb-4">
                            <li>
                                <p>
                                    <strong>Type:</strong> <a href="#">Electronics</a>,
                                    <a href="#">For sale</a>
                                </p>
                            </li>
                            <li>
                                <p><strong>Condition:</strong> New</p>
                            </li>
                            <li>
                                <p><strong>Brand:</strong> <a href="#">Apple</a></p>
                            </li>
                        </ul> -->
                        <div class="ads-btn mb-4 d-flex justify-content-end">
                            <a :href="soft.downurl" class="btn btn-common"><i class="lni-envelope"></i> 下载</a>
                            <!-- <a href="#" class="btn btn-common"><i class="lni-phone-handset"></i> 01154256643</a> -->
                        </div>
                        <!-- <div class="share">
                            <span>Share: </span>
                            <div class="social-link">
                                <a class="facebook" href="#"><i class="lni-facebook-filled"></i></a>
                                <a class="twitter" href="#"><i class="lni-twitter-filled"></i></a>
                                <a class="linkedin" href="#"><i class="lni-linkedin-fill"></i></a>
                                <a class="google" href="#"><i class="lni-google-plus"></i></a>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>

            <!-- <div class="description-info">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-xs-12">
                        <div class="description">
                            <h4>说明</h4>
                            <p>
                                使用说明
                            </p>
                        </div>
                    </div>
                     <div class="col-lg-4 col-md-6 col-xs-12">
                        <div class="short-info">
                            <h4>Short Info</h4>
                            <ul>
                                <li>
                                    <a href="#"><i class="lni-users"></i> More ads by
                                        <span>User</span></a>
                                </li>
                                <li>
                                    <a href="#"><i class="lni-printer"></i> Print this ad</a>
                                </li>
                                <li>
                                    <a href="#"><i class="lni-reply"></i> Send to a friend</a>
                                </li>
                                <li>
                                    <a href="#"><i class="lni-warning"></i> Report this ad</a>
                                </li>
                            </ul>
                        </div>
                    </div> 
                </div>
            </div> -->
        </div>
    </div>

    <section class="featured-lis section-padding">
        <div class="container">
            <h3 class="section-title">随机推荐</h3>
            <div class="row">
                <div class="col-lg-4 col-md-6 col-xs-12" v-for="(soft,index) in randSoftList" :key="index">
                    <div class="product-item">
                        <div class="product-content">
                            <h3 class="product-title">
                                <RouterLink :to="{path:'/index/detail',query:{code:soft.code,id:soft.id}}">
                                    <a href="javascript:void 0">{{soft.name}}</a>
                                </RouterLink>
                            </h3>
                            <a href="#"><i class="lni-layers"></i> {{ soft.type == 1?'游戏':'软件'}}</a>
                            <a href="#"><i class="lni-package"></i> {{soft.isCrack?'破解':'非破解'}}</a>
                            <div class="icon">
                                <i class="lni-heart"></i>
                            </div>
                            <div class="card-text">
                                <div class="meta">
                                    <div class="float-left">
                                        <span class="icon-wrap">
                                            <i class="lni-star-filled"></i>
                                            <i class="lni-star-filled"></i>
                                            <i class="lni-star"></i>
                                            <i class="lni-star"></i>
                                        </span>
                                        <!-- <span class="lni-eye"> <span>1</span>  </span> -->
                                    </div>
                                    <div class="float-right">
                                        <span class="lni-eye"> <span>1</span>  </span>
                                        <!-- <span class="btn-product bg-red"><a href="#">$ 9.9</a></span> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import { ref } from "vue"
import dayjs from 'dayjs'
export default {
    data() {
        return {
            obj:{},
            soft:{},
            randSoftList:[]
        }
    },
    created() {
        this.getLocationSearch('id')
        this.loadData()
    },
    methods: {
        loadData() {
            this.$axios.get(`/home/softdetail/${this.obj.id}`).then(({ data }) => {
                if (data.code == 0) {
                    if(data.obj.system){
                        data.obj.system =  data.obj.system.join(",") 
                    }
                    this.soft = data.obj
                    this.randSoftList = data.randSoftList
                } else {
                }
            }).catch(() => {

            })
        },
        formatDate(date) {
            return dayjs(date).format('YYYY/MM/DD') // '25/01/2019'
        },
        getLocationSearch(...params){
            let search = window.location.search
            search = search.substring(1)
            let searchParamsArr = search.split("&")
            let obj ={}
            searchParamsArr.forEach(x=>{
                let key = x.split("=")[0]
                let value = x.split("=")[1]
                if(key && value){
                    obj[key] = value.toString()
                }
            })
            if(params.length>0){
                let parObj = {}
                for (const index in params) {
                    let key = params[index]
                    parObj[key] = obj[key]
                }
                this.obj = parObj
                return
            }
            this.obj = obj
        }
    },
    watch: {
        '$route'(to, from) {
            let id = this.$route.query.id || ""
            if (id) {
                this.getLocationSearch('id')
                this.loadData()
            }
        },
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url(../assets/css/bootstrap.min.css);
@import url(../assets/fonts/line-icons.css);
@import url(../assets/css/slicknav.css);
@import url(../assets/css/color-switcher.css);
@import url(../assets/css/nivo-lightbox.css);
@import url(../assets/css/animate.css);
@import url(../assets/css/owl.carousel.css);
@import url(../assets/css/main.css);
@import url(../assets/css/responsive.css);
</style>